<script setup lang='ts'>
  import { onMounted, computed } from 'vue';
  import { getAssetsFile, nameFilter } from '@/utils/public';
  import { rankingType } from '@/pinia/getter';
  import portrait from '@/components/portrait.vue';
  const $emit = defineEmits(['contributor'])
  const props = defineProps({
    // 是否可跳转个人主页
    onGoUserInfo:{
      type:Boolean,
      default:false
    },
    user_info:{
      type:Object,
      default:()=>{

      }
    },
    // 排榜规则类型 1=礼物钻石价值 2=人气票 3=礼物钻石价值+人气票
    score_rule:{
      type:Number,
      default:0
    },
  })
  const tipsSet = computed(()=>{
    if(!props.user_info.diamond_score 
      || !props.user_info.score 
      || !props.user_info.wealth_score
    ){
      if( props.user_info.num == 0 ) {
        return true
      }
    }
    return false
  })
  const openPowerList = ()=>{
    $emit('contributor')
  }
  onMounted(()=>{

  })
</script>
<template>
  <div class="rankingInfoBack flex-align">
    <div class="rankingNum">
      <xmimg v-if="user_info.num <= 3 && user_info.num"
        :src="`ranking/ranking${user_info.num}.png`"
        class="iconImg"
      />
      <span v-else>{{ !tipsSet ? user_info.num > 99 ? '99+' : user_info.num || '?' : '?' }}</span>
    </div>
    <portrait
      :user_id="user_info.user_id"
      :room_id="user_info.room_id"
      :room_open="user_info.room_open"
      :image="user_info.image"
      :onGoUserInfo="onGoUserInfo"
      :tabberType="rankingType"
    />
    <div class="userInfo">
      <div class="nickName">{{ nameFilter(user_info.name) }}</div>
      <!-- 魅力榜、人气榜显示 -->
      <div v-if="[1,2].indexOf(rankingType) > -1 && [1,2].indexOf(score_rule) > -1" class="price flex-align">
        <xmimg :src="rankingType == 1 ? 'icon1.png':'icon3.png'" class="iconImg" />
        <span>{{ rankingType == 1 ? user_info.diamond_score || 0 : user_info.wealth_score || 0 }}</span>
      </div>
      <slot name="ticket"></slot>
    </div>
    <div class="fraction" v-if="[3,4,5].indexOf(rankingType) > -1 && !tipsSet">
      <!-- 积分 -->
      <div v-if="score_rule == 3" class="price flex-align">
        <xmimg src="icon2.png" class="iconImg" />
        <span>{{ user_info.score || 0 }}</span>
      </div>
      <!-- 钻石 -->
      <div v-if="[1,3].indexOf(score_rule) > -1" class="price flex-align">
        <xmimg src="icon1.png" class="iconImg" />
        <span>{{ user_info.diamond_score || 0 }}</span>
      </div>
      <!-- 人气票 -->
      <div v-if="[2,3].indexOf(score_rule) > -1" class="price flex-align">
        <xmimg src="icon3.png" class="iconImg" />
        <span>{{ user_info.wealth_score || 0 }}</span>
      </div>
    </div>
    <div class="listLengthTips flex-align" v-if="tipsSet">
      <xmimg src="ranking/integralNoneIcon.png" class="iconImg" />
      <span>暂无排名</span>
    </div>
    <div
      class="rightInfo"
      v-if="[1,2].indexOf(rankingType) > -1 && !tipsSet">
      <div
        @click="openPowerList"
        class="userlist flex-align"
      >
        <portrait
          v-for="(item,index) in user_info.richUserList"
          :image="item.image"
          :style="{zIndex:4-index}"
          :tabberType="1"
          :onGoUserInfo="true"/>
      </div>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .rankingInfoBack {
    width: 100%;
    height: 80px;
    padding: 10px 0 10px 9px;
    box-sizing: border-box;
    background: var(--rankingUserInfoBackImage) left top / 100% 100% no-repeat;
    .rankingNum {
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      margin-right: 8px;
      .iconImg {
        width: 100%;
        height: 100%;
      }
      span {
        color: var(--userTopNumFontColor);
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
      }
    }
    .userInfo {
      margin-left: 10px;
      .nickName {
        color: var(--nickNameFontColor);
        line-height: 16px;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
      }
    }
    .price {
      width: 100px;
      height: 18px;
      padding: 2px 0 2px 4px;
      box-sizing: border-box;
      background: var(--priceNumBackColor);
      border-radius: 9px;
      .iconImg {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
      span {
        color: var(--priceNumFontColor);
        font-size: 12px;
        font-weight: 500;
        line-height: 12px;
      }
    }
    .fraction {
      margin: 0 0 0 auto;
      .price {
        width: 90px;
      }
      .price:nth-child(2) {
        margin: 2px 0;
      }
    }
    .listLengthTips {
      margin: 0 24px 0 auto;
      img {
        width: 12px;
        height: 12px;
        margin-right: 4px;
      }
      span {
        color: #fff;
        font-size: 12px;
        font-weight: 500;
      }
    }
    .rightInfo {
      width: max-content;
      margin: 0 0 0 auto;
      padding: 0 22px 0 0;
      box-sizing: border-box;
      .userlist {
        width: max-content;
        padding: 0 10px 0 0;
        box-sizing: border-box;
        margin: 0 0 0 auto;
        .portrait {
          width: 32px;
          height: 32px;
          margin: 0 -10px 0 0;
        }
      }
      :deep(.needsocre) {
        color: var(--diffPointsFontColor);
        font-size: 10px;
        font-weight: 500;
        text-align: right;
        margin-top: 6px;
        span {
          color: var(--diffPointsFontNumColor);
        }
      }
    }
  }
</style>